<template>
  <div class="list">
    <h4 class="h" @click="add()">搞笑段子   {{getCount}}</h4>
    <ul>
      <li class="neirong" v-for="(v,index) in arr" :key="index" @click="detail(v.sid)">{{v.text}}</li>
    </ul>
    <Page @msg="getPage"></Page>
  </div>
</template>
<script>
import Page from "@/comp/Page"
import Detail from "@/comp/Detail"
export default {
  name: "List",
  data() {
    return {
      currentPage:1,
      arr: [],
    };
  },
  components: { Page , Detail},
  methods: {
      getPage(a){
        var page= "page=" + a +"&count=8";
        this.axios.post("https://api.apiopen.top/getJoke",page).then(result=>{
          this.arr = result.data.result;
          sessionStorage.setItem("currentPage",a);
        })
      },
      detail(sid){
        this.$router.push(`/detail/${sid}`).catch(e=>{});
      },
      add(){
        this.$store.commit("add");
      }
    },
  mounted() {
    if (sessionStorage.getItem("currentPage")) {
      this.currentPage = sessionStorage.getItem("currentPage")
    }
    var page= "page=" + this.currentPage +"&count=8";
    this.axios.post("https://api.apiopen.top/getJoke",page).then(result=>{
          this.arr = result.data.result;
      })
  },
  computed: {
    getCount(){
      return this.$store.state.count;
    }
  },
}
</script>
<style scoped>
.l1 {
  width: 200px;
  height: 300px;
  border: 1px solid black;
}
li{
  list-style: none;
}
.h{
  color: aqua;
  margin-left: -293px;
}
.neirong{
  font-size: 20px;
}
</style>